<template>
	<view class="refresh" @touchmove="touchmove" @touchend="touchend">
		<view class="refreshContent acea-row row-middle row-center" :style="'top: '+moveY+'rpx;transform: rotate('+rotate+'deg);'">
			<image class="icon" :src="refreshPng" mode="" ></image>
		</view>
	</view>
</template>

<script>
	import refreshPng from "./refresh.png"
	export default{
		props:{
			scrollTop:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				disable:false, //是否禁用
				pageYList:[],
				refreshPng,
				moveY:-64,
				rotate:-150
			}
		},
		methods:{
			touchmove(e){
				if(!this.disable){
					let pageYList = JSON.parse(JSON.stringify(this.pageYList))
					pageYList.push(Math.round(e.touches[0].pageY))
					let moveY = parseInt(pageYList[pageYList.length-1] - pageYList[0])
					// console.log(e.touches[0].pageY,moveY,this.moveY)
					if(moveY <= 150){
						console.log(e.touches[0].pageY,moveY,this.moveY)
						if(moveY > this.moveY + 1){
							for(let i = this.moveY + 1;i <= moveY;i++){
								this.moveY = i
								this.rotate = i - 150
							}
						}else{
							this.moveY = moveY
							this.rotate = moveY - 150
						}
						this.pageYList = pageYList
					}
				}else{
					this.pageYList = []
				}
			},
			touchend(){
				this.pageYList = []
				this.moveY = -64
			},
		},
		watch:{
			scrollTop(e){
				if(e == 0){
					this.disable = false
				}else{
					this.disable = true
				}
			}
		}
	}
</script>

<style scoped>
	.refresh{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
	}
	.refreshContent{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		/* top: 160rpx; */
		width: 64rpx;
		height: 64rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0px 4px 0 rgb(0 0 0 / 37%);
		border-radius: 50%;
		padding: 6rpx;
		box-sizing: border-box;
		/* transition: top 0.1s ease,transform 0.1s ease; */
	}
	.refreshContent .icon{
		width: 52rpx;
		height: 52rpx;
		display: block;
		margin: 0 0 0 1rpx;
	}
</style>
